<template>
    <div class="playlists_container">
        <div class="top_cart">
           <div class="cart_img">
              <img :src="topList.coverImgUrl" alt="">
           </div>
           <div class="cart_time">
              <div class="tag">精品歌单</div>
              <div class="title">{{topList.name}}</div>
              <div class="info">{{topList.description}}</div>
           </div>
           <!-- 背景-->
           <img class="bg" :src="topList.coverImgUrl" alt="">
        </div>
        <div class="tab_container">
           <div class="tab_bar">
             <span class="item" :class="{active:tag=='全部'}" @click="tag='全部'">全部</span>
             <span class="item" :class="{active:tag=='欧美'}" @click="tag='欧美'">欧美</span>
             <span class="item" :class="{active:tag=='华语'}" @click="tag='华语'">华语</span>
             <span class="item" :class="{active:tag=='流行'}" @click="tag='流行'">流行</span>
             <span class="item" :class="{active:tag=='说唱'}" @click="tag='说唱'">说唱</span>
             <span class="item" :class="{active:tag=='摇滚'}" @click="tag='摇滚'">摇滚</span>
             <span class="item" :class="{active:tag=='民谣'}" @click="tag='民谣'">民谣</span>
             <span class="item" :class="{active:tag=='电子'}" @click="tag='电子'">电子</span>
             <span class="item" :class="{active:tag=='轻音乐'}" @click="tag='轻音乐'">轻音乐</span>
             <span class="item" :class="{active:tag=='影视原声'}" @click="tag='影视原声'">影视原声</span>
             <span class="item" :class="{active:tag=='ACG'}" @click="tag='ACG'">ACG</span>
             <span class="item" :class="{active:tag=='怀旧'}" @click="tag='怀旧'">怀旧</span>
             <span class="item" :class="{active:tag=='治愈'}" @click="tag='治愈'">治愈</span>
             <span class="item" :class="{active:tag=='旅行'}" @click="tag='旅行'">旅行</span>
           </div>
           <div class="tab_content">
               <div class="items">
                  <div class="item" v-for="item in list" :key="item.id" @click="playMv(item.id)">
                     <div class="img_wrap">
                      <p>
                      播放量:
                      <span class="num">{{item.playCount}}</span>
                      </p>
                       <img :src="item.coverImgUrl" alt="">
                       <div class="play el-icon-caret-right"></div>
                     </div>
                     <div class="name">
                        {{item.description}}
                     </div>
                  </div>                                                                                                          
               </div>
           </div>
        </div>
    <!-- 分页器 --> 
    <el-pagination
      @current-change="handleCurrentChange"
       background
      :current-page="page"
      :page-size="10"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>    
    </div>
</template>

<script>
export default {
    data  () {
        return {
          //顶部推荐歌单
          topList:{},
          //歌单列表数据
          list:[],
          //默认高亮
          tag:"全部",
          //总页数
          total:0,
          //页码
          page:1
        }
    },
    //监听器
    watch:{
       tag () {
            //修改页码为1
           this.page = 1
           if(this.tag == '旅行'){
             return this.getList()
           }else{
             this.getTopList()
             this.getList()
           }
       }
    },
    created () {
       this.getTopList()
       this.getList()
    },
    methods:{
     async getTopList () {
          const res = await this.$http.get('https://autumnfish.cn/top/playlist/highquality',{params:{limit:1,cat:this.tag}})
            if(res.data.code == 200){
               this.topList = res.data.playlists[0]
            }
      },
     async getList () {
         const res = await this.$http.get('https://autumnfish.cn/top/playlist/',{params:{limit:10,offset:(this.page-1)*10,cat:this.tag}})
          if(res.data.code == 200){
              this.list = res.data.playlists
              this.total = res.data.total
              console.log(res)
          }
      },
      //当前页发生改变触发
      handleCurrentChange (newPage) {
        this.page = newPage
        this.getList()
      },
      playMv (id) {
        this.$router.push(`/playlist?id=${id}`)
      }
    }
}
</script>

<style lang="less" scoped>
     .top_cart{
         background-color: rgba(0, 0, 0, 0.6);
           padding: 20px;
           height: 200px;
           border-radius: 5px;
           display: flex;
           position: relative;
           overflow: hidden;
           .bg{
                   width: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    z-index:-1;
                    // 背景模糊
                    filter:blur(10px);
             }
        .cart_img{
            margin-right: 20px;
            img{
                width: 160px;
                height: 160px;
            }
        }
        .cart_time{
            .tag{
                 color: #dfac67;
                 border: 1px solid #dfac67;
                 width: 100px;
                 height: 30px;
                 text-align: center;
                 line-height: 30px;
                 font-weight: 600;
                 border-radius: 5px;
                 font-size: 16px;
                 cursor: pointer;
            }
            .title{
                color: wheat;
                margin-top: 10px;
            }
            .info{
                font-size: 14px;
                color: #888482;
                padding-top: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 5;
            }
        }
     }
     .tab_container{
         margin-top: 30px;
         .tab_bar{
             display: flex;
             justify-content: flex-end;
             .item{
                 font-size: 15px;
                 margin-right: 20px;
                 cursor: pointer;
                 color: gray;
             }
         }
     }
     .tab_content{
         margin-top: 20px;
         .items{
             display: flex;
             flex-wrap: wrap;
            .item{
                width: 200px;
                cursor: pointer;
                overflow: hidden;
                position: relative;
                margin: 10px;
                .img_wrap{
                    p{
                       position: absolute;
                       top: -30px;
                       background: rgba(0, 0, 0, 0.5);
                       font-size: 14px;
                       width: 100%;
                       height: 30px;
                       line-height: 30px;
                       padding-left: 5px;
                       color: white;
                    }
                    img{
                        width: 200px;
                        height: 200px;
                        border-radius: 5px;
                    }
                    .play{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: absolute;
                        right: 10px;
                        bottom: 55px;
                        width: 40px;
                        height: 40px;
                        background: white;
                        color: #dd6d60;
                        border-radius: 50%;
                        font-size: 30px;
                        opacity: 0;
                    }
                }
                 .name{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        font-size: 14px;
                    }
                }
                .item:hover p{
                  top: 0;
                }
                .item:hover .play{
                   opacity: 1;
                }
            } 

         }
     
</style>